<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				width: 400px;
				height: 300px;
				text-align: center;
				border-collapse: collapse;
				border: none;
			}
			th,td{
				border: 1px solid gray;
			}
			th{
				background-color: cornflowerblue;
			}
			.color{
				background-color: gainsboro;
			}
			.white{
				background-color: white;
			}
		</style>
	</head>
	<body>
		<table>
			<tr><th><input type="checkbox" ></th><th>菜名</th><th>饭店</th></tr>
			<tr class="color"><td><input  type="checkbox"></td><td>红烧肉</td><td>食堂</td></tr>
			<tr class="color"><td><input  type="checkbox"></td><td>香辣鸡丁</td><td>食堂</td></tr>
			<tr class="color"><td><input  type="checkbox"></td><td>粉蒸肉</td><td>食堂</td></tr>
			<tr class="color"><td><input  type="checkbox"></td><td>麻辣小龙虾</td><td>食堂</td></tr>
		</table>
		<script>
			var color = document.getElementsByClassName("color");
			for(var i = 0;i < color.length;i++){
				color[i].onmouseover = white;
				color[i].onmouseout = changecolor;
			}
			function white(event){
				this.className = "white";
			}
			function changecolor(event){
				this.className = "color";
			}
			
			var check = document.getElementsByTagName("input");
			check[0].onclick = function(){
				for(var i = 1;i < check.length;i++){
					if(check[0].checked == true ) 
					{
						check[i].checked = true;
					}else{
						check[i].checked = false;
					}
				}
				}
			
		</script>
	</body>
</html>
